<template>
  <div class="app-container home">
    <div class="other">
      <el-card class="box-card2">
        <div slot="header" class="clearfix" style="text-align: center">
          <span style="font-size: 20px">近一周客房销售金额</span>
        </div>
        <div class="text item">
          <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
        </div>
      </el-card>

      <el-card class="box-card3">
        <div slot="header" class="clearfix" style="text-align: center">
          <span style="font-size: 20px">近一周餐饮销售金额</span>
        </div>
        <div class="text item">
          <div id="myChart2" :style="{width: '100%', height: '400px'}"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {getCount,getCount2} from "@/api/system";

export default {
  name: "Index",
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
    this.drawLine();
    this.drawLine2();
  },
  methods: {
    drawLine() {
      getCount().then(res => {
        let data = res.data;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: data.day
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: data.money,
              type: 'bar',
              itemStyle: {
                normal: {
                  //这里是颜色
                  color: function(params) {
                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
                    return colorList[params.dataIndex]
                  }
                }
              }
            }
          ]
        });
      })

    },
    drawLine2() {
      getCount2().then(res=>{
        let data = res.data;
        // 基于准备好的dom，初始化echarts实例
        let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart2.setOption({
          xAxis: {
            type: 'category',
            data: data.day
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: data.money,
              type: 'line',

            }
          ],
          lineStyle:{
            color: '#FFA100'
      }
        });
      })
    }
  },


};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
}

//.other {
//  display: flex;
//}

.box-card2 {
  width: 100%;
}

.box-card3 {
  width: 100%;
}
</style>

